import { memo, useEffect, useState } from 'react';
// import { useProductTypes } from '@/services/product';
import { SpinLoading, Tabs } from 'antd-mobile';
// import { DEFAULT_TYPE } from '@/utils/constants';
import axios from 'axios';
import style from './index.module.less';

interface IProps {
  onChange: (key: string) => void;
}

/**
 * 分类选择器
 * @param onChange
 * @constructor
 */
const TypeSelect = ({ onChange }: IProps) => {
  const [data, setData] = useState([]);
  const getlist = async () => {
    const { data } = await axios.get('/public/typeSelect.json');
    setData(data.data);
  };
  useEffect(() => {
    getlist();
  }, []);
  const [loading] = useState(true);

  if (loading && data.length === 0) {
    return <SpinLoading style={{ margin: 'auto' }} />;
  }
  return (
    <Tabs className={style.tabs} onChange={onChange} defaultActiveKey="all">
      <Tabs.Tab title="全部" key="all" />
      {data?.map((item: any) => (
        <Tabs.Tab title={item.title} key={item.key} />
      ))}
    </Tabs>
  );
};

export default memo(TypeSelect);
